<h2 class="flex-row-space-between">{{'AUTH_CENTER' |translate}} / {{'MESSAGE_DASHBOARD'|translate}}
    <button mat-raised-button color="primary" style="height: 36px;"
    (click)="doRefresh()">{{'REFRESH'|translate}}</button>
</h2>
<div style="display: flex;flex-direction: row;align-items: center;height: 56px; justify-content:end;">
    <app-table-column-config [formId]="formId" [columns]="getColumnLabelValue()" ></app-table-column-config>
</div>
<div class="mat-elevation-z8">
<div class="table-container">
    <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef> {{columnList['date']|translate}} </th>
            <td mat-cell *matCellDef="let row">
                {{row.date | date:'short'}}
            </td>
        </ng-container>
        <ng-container matColumnDef="title">
            <th mat-header-cell *matHeaderCellDef> {{columnList['title']|translate}} </th>
            <td mat-cell *matCellDef="let row">
                {{row.title|translate}}
            </td>
        </ng-container>
        <ng-container matColumnDef="message">
            <th mat-header-cell *matHeaderCellDef> {{columnList['message']|translate}} </th>
            <td mat-cell *matCellDef="let row">
                {{row.descriptions.join(',')}}
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns();"></tr>
    </table>
</div>
<mat-paginator [showFirstLastButtons]="true" [length]="totoalItemCount" [pageIndex]="entitySvc.pageNumber"
    [pageSize]="pageSize" (page)="pageHandler($event)">
</mat-paginator>
</div>